<!--
 * @Author: yan_hai_dong 891236760@qq.com
 * @Date: 2022-06-02 14:13:25
 * @LastEditors: yan_hai_dong 891236760@qq.com
 * @LastEditTime: 2022-06-06 10:14:33
 * @FilePath: \app\src\components\IconSelect\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- @author zhengjie -->
<template>
  <div class="icon-body">
    <el-input
      v-model="name"
      style="position: relative"
      clearable
      placeholder="请输入图标名称"
      @clear="filterIcons"
      @input.native="filterIcons"
      @keyup.enter.native="filterIcons"
      focus
      size="small"
    >
      <i slot="suffix" class="el-icon-search el-input__icon" />
    </el-input>
    <div v-if="!iconList.length" class="empty-box">
      <svg-icon icon-class="搜索结果空" class-name="empty-icon" />
    </div>
    <MyScrollbar v-else>
      <div class="icon-list">
        <div
          v-for="(item, index) in iconList"
          :key="index"
          @click="selectedIcon(item)"
          :class="['item', { select: item == value }]"
          :title="item"
        >
          <svg-icon :icon-class="item" class-name="item-icon" />
          <span>{{ item }}</span>
        </div>
      </div>
    </MyScrollbar>
  </div>
</template>

<script>
import icons from "./requireIcons";
import MyScrollbar from "@/components/MyScrollbar";
export default {
  name: "IconSelect",
  props: {
    value: {
      type: String,
      default: "",
    },
  },
  components: {
    MyScrollbar,
  },
  data() {
    return {
      name: "",
      iconList: icons,
    };
  },
  methods: {
    /* 过滤图标 */
    filterIcons() {
      if (this.name) {
        this.iconList = this.iconList.filter((item) =>
          item.includes(this.name)
        ); // 检测是否存在
      } else {
        this.iconList = icons;
      }
    },
    selectedIcon(name) {
      this.$emit("selected", name);
      document.body.click();
    },
    /* 重置 */
    reset() {
      this.name = "";
      this.iconList = icons;
    },
  },
};
</script>

<style lang="less" scoped>
.icon-body {
  width: 100%;
  @itemHeight: 80px; // 图标大小
  @gridGap: 10px; // 图标间距
  @showMaxLength: 3; // 图标显示最大行数量
  @showMinLength: 1; // 图标显示最小行数量
  .icon-list {
    min-height: calc(
      @itemHeight* @showMinLength + @gridGap* @showMinLength - @gridGap
    );
    max-height: calc(
      @itemHeight* @showMaxLength + @gridGap* @showMaxLength - @gridGap
    );
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(@itemHeight, 1fr));
    grid-gap: @gridGap;
    grid-row: @gridGap;
    margin: @gridGap;
    .item {
      line-height: 30px;
      display: flex;
      flex-direction: column;
      align-items: center;
      height: @itemHeight;
      justify-content: center;
      border-radius: 4px;
      .item-icon {
        font-size: 30px;
      }
      span {
        padding: 0 10px;
        box-sizing: border-box;
        max-width: 100%;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #909399;
        font-size: 12px;
      }
      &:hover,
      &.select {
        // 添加阴影
        box-shadow: 0 2px 12px 0 rgba(6, 89, 243, 0.1);
        cursor: pointer;
        .item-icon {
          font-size: 36px;
        }
        span {
          color: #409eff;
        }
      }
    }
  }
  .empty-box {
    height: calc(
      @itemHeight* @showMaxLength + @gridGap* @showMaxLength - @gridGap
    );
    display: flex;
    justify-content: center;
    align-items: center;
    .empty-icon {
      font-size: 200px;
    }
  }
}
</style>
